﻿@{
    ViewBag.Title = "For2";
}

<h4>People</h4>
<ul data-bind="foreach: people">
    <li>Name at position <span data-bind="text: $index"></span>: 
         <span data-bind="text: name"></span>
        <a href="#" data-bind="click: $parent.removePerson">删除</a>
    </li>
</ul>
<button data-bind="click: addPerson">添加新节点</button>

<script type="text/javascript">
    function AppViewModel() {
        var self = this;

        self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
        ]);

        self.addPerson = function () {
            self.people.push({ name: "New at " + new Date() });
        };

        self.removePerson = function () {
            self.people.remove(this);
        }
    }

    ko.applyBindings(new AppViewModel());
</script>
